<template>
	<a-descriptions size="small" :column="24" v-if="isEnterprise('temp') && props.contractType !== 2">
		<template #title>
			<div class="d-module-title">
				<b>{{ detailInfo.contractType === 2 ? '入住人' : '租客' }}信息</b>
				<!-- v-action="['mk_contract_tenant_ggzkxx']" -->
				<!-- 审批中 作废不展示 -->
				<a
					v-if="![1, '1'].includes(props.approvalStatus as number) && ![41,42].includes(props.contractStatus as number)&& hasPermissions(['mk_contract_tenant_ggzkxx'])"
					@click.stop="operationList.showTenantInformation = true">
					<FormOutlined class="update-icon" />
					<a class="update-information">编辑租客信息</a>
				</a>
			</div>
		</template>
		<a-descriptions-item label="姓名" :span="8">{{ dataSource.name }}</a-descriptions-item>
		<a-descriptions-item label="电话" :span="8">
			<a-space :size="5">
				<span>{{ dataSource.phone }}</span>
				<a v-action="['mk_contract_tenant_bjzkxx']" @click.stop="operationList.showEditTenantPhone = true"><FormOutlined /></a>
				<a v-action="['mk_contract_tenant_bjzkxx']" @click.stop="operationList.showModifyRecord = true">变更记录</a>
			</a-space>
		</a-descriptions-item>
		<a-descriptions-item label="性别" :span="8">
			<span class="">
				{{ !dataSource.gender && dataSource.gender !== 0 ? '-' : sexList[dataSource.gender] }}
			</span>
			<a-button
				v-if="isEnterprise('temp')"
				type="primary"
				size="small"
				style="margin-left: auto"
				@click="grantAccess({data: dataSource})">
				新增授权
			</a-button>
		</a-descriptions-item>
		<a-descriptions-item label="证件类型" :span="8">
			{{ CERTIFICATION_TYPE_MAP[dataSource.certificationType] || '身份证' }}
		</a-descriptions-item>
		<a-descriptions-item label="证件号码" :span="8">{{ dataSource.identityCard }}</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="客户来源" :span="8">
			{{ dataSource.customerResourceName || '-' }}
		</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="职业信息" :span="8">
			{{ dataSource.profession ? occupation.find(v => v.value == dataSource.profession)?.label : '' }}
		</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="工作单位" :span="8">{{ dataSource.employer || '-' }}</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="重点人群" :span="8">
			{{ dataSource.keyGroupsTypeName || '-' }}
		</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="爱好" :span="8">{{ dataSource.interestName || '-' }}</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="账号类型" :span="8">
			{{ paymentType[dataSource.paymentType] || '' }}
		</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="收付款账号" :span="8">
			{{ dataSource.paymentNo || '-' }}
		</a-descriptions-item>
		<a-descriptions-item label="紧急联系人" :span="8">{{ dataSource.emergencyName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="紧急联系人电话" :span="8">{{ dataSource.emergencyPhone || '-' }}</a-descriptions-item>
		<a-descriptions-item label="与租客的关系" :span="8">
			{{
				dataSource.emergencyType
					? relationshipList.filter((item: any) => item.value == dataSource.emergencyType)[0].label
					: '' || '-'
			}}
		</a-descriptions-item>
		<a-descriptions-item v-if="isEnterprise('temp')" label="证件凭证" :span="8">
			<div class="file-upload-container custom">
				<div class="file-preview">
					<a-image
						v-if="dataSource.frontImgUrl"
						style="object-fit: contain"
						:width="100"
						:height="60"
						:src="dataSource.frontImgUrl"
						:preview="{
							src: dataSource.frontImgUrl
						}" />
					<a-image
						v-if="dataSource.rearImgUrl"
						:width="100"
						:height="60"
						style="object-fit: contain"
						:src="dataSource.rearImgUrl"
						:preview="{src: dataSource.rearImgUrl}" />
				</div>
			</div>
		</a-descriptions-item>
		<a-descriptions-item v-if="props.detailInfo?.talentedPersonTypeId" label="人才类型">
			{{ props.detailInfo?.talentedPersonTypeName }}
		</a-descriptions-item>
	</a-descriptions>
	<a-descriptions size="small" v-if="isEnterprise('checkIn') && props.contractType !== 2" :column="24">
		<template #title>
			<div class="d-module-title">
				<b>承租人信息</b>
			</div>
		</template>
		<a-descriptions-item label="姓名" :span="8">{{ enterRenterInfo.name || '-' }}</a-descriptions-item>
		<a-descriptions-item label="电话" :span="8">{{ enterRenterInfo.phone || '-' }}</a-descriptions-item>
		<a-descriptions-item label="性别" :span="8">
			<span class="">
				{{ !enterRenterInfo.gender && enterRenterInfo.gender !== 0 ? '-' : sexList[enterRenterInfo.gender] }}
			</span>
		</a-descriptions-item>
		<a-descriptions-item label="证件类型" :span="8">
			{{ CERTIFICATION_TYPE_MAP[enterRenterInfo.certificationType] || '-' }}
		</a-descriptions-item>
		<a-descriptions-item label="证件号码" :span="8">{{ enterRenterInfo.identityCard || '-' }}</a-descriptions-item>
		<a-descriptions-item label="客户来源" :span="8">{{ enterRenterInfo.customerResourceName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="职业信息" :span="8">
			{{ enterRenterInfo.profession ? occupation.find(v => v.value == enterRenterInfo.profession).label : '-' }}
		</a-descriptions-item>
		<a-descriptions-item label="工作单位" :span="8">{{ enterRenterInfo.workAddress || '-' }}</a-descriptions-item>
		<a-descriptions-item label="重点人群" :span="8">{{ enterRenterInfo.keyGroupsTypeName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="爱好" :span="8">{{ enterRenterInfo.interestName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="账号类型" :span="8">{{ paymentType[enterRenterInfo.paymentType] || '-' }}</a-descriptions-item>
		<a-descriptions-item label="收付款账号" :span="8">{{ enterRenterInfo.paymentNo || '-' }}</a-descriptions-item>

		<a-descriptions-item label="证件凭证" :span="8">
			<div class="file-upload-container custom">
				<div class="file-preview">
					<a-image
						v-if="enterRenterInfo.frontImgUrl"
						style="object-fit: contain"
						:width="100"
						:height="60"
						:src="enterRenterInfo.frontImgUrl"
						:preview="{
							src: enterRenterInfo.frontImgUrl
						}" />
					<a-image
						v-if="enterRenterInfo.rearImgUrl"
						:width="100"
						:height="60"
						style="object-fit: contain"
						:src="enterRenterInfo.rearImgUrl"
						:preview="{src: enterRenterInfo.rearImgUrl}" />
				</div>
			</div>
		</a-descriptions-item>
	</a-descriptions>
	<a-divider type="horizontal" v-if="props.contractType !== 2" style="background-color: #f5f5f5" />
	<!-- 包租合同子合同不展示 -->
	<a-descriptions size="small" v-if="isEnterprise('temp') && props.contractType !== 2" :column="24">
		<template #title>
			<div class="d-module-title">
				<b>同住人信息</b>
				<a-button
					v-show="isEnterprise('temp')"
					v-if="isEdit"
					type="primary"
					size="small"
					style="margin-left: auto"
					@click="editTogether({})">
					添加同住人
				</a-button>
			</div>
		</template>

		<template v-for="(item, index) in dataSource.togetherList" :key="index">
			<a-descriptions-item :span="24">
				<div class="flex-align-center flex1">
					<span style="margin-right: 20px">同住人{{ index + 1 }}</span>
					<template v-if="isEdit">
						<a @click="editTogether(item)"><FormOutlined /></a>
						<a-divider type="vertical" style="margin: 0 8px" />
						<a class="error" @click="deleteTogether(item.id)"><DeleteOutlined /></a>
					</template>
					<a-button type="primary" size="small" style="margin-left: auto" @click="grantAccess({data: item})">新增授权</a-button>
				</div>
			</a-descriptions-item>
			<a-descriptions-item label="姓名" :span="8">{{ item.name }}</a-descriptions-item>
			<a-descriptions-item label="电话" :span="8">{{ item.phone }}</a-descriptions-item>
			<a-descriptions-item label="性别" :span="8">{{ item.gender === 1 ? '男' : '女' }}</a-descriptions-item>
			<a-descriptions-item label="证件类型" :span="8">{{ CERTIFICATION_TYPE_MAP[item.certificationType] || '' }}</a-descriptions-item>
			<a-descriptions-item label="证件号码" :span="8">{{ item.identityCard }}</a-descriptions-item>
			<a-descriptions-item label="关系" :span="8">
				<template v-if="item.renterRelation">
					{{ renterRelationList[Number(item.renterRelation) - 1].label }}
				</template>
			</a-descriptions-item>
			<a-descriptions-item label="附件" :span="24">
				<div class="file-upload-container custom">
					<div class="file-preview">
						<a-image
							style="object-fit: contain"
							:width="100"
							:height="60"
							v-if="item.frontImgUrl"
							:src="item.frontImgUrl"
							:preview="{
								src: item.frontImgUrl
							}" />
						<a-image
							:width="100"
							:height="60"
							style="object-fit: contain"
							v-if="item.rearImgUrl"
							:src="item.rearImgUrl"
							:preview="{src: item.rearImgUrl}" />
					</div>
				</div>
			</a-descriptions-item>
			<a-descriptions-item :span="24" v-if="index < dataSource.togetherList.length - 1">
				<a-divider type="horizontal" style="background-color: #f5f5f5; margin: 10px 0" />
			</a-descriptions-item>
		</template>
	</a-descriptions>

	<!-- <a-descriptions size="small" v-if="isEnterprise('checkIn')" :column="24">
		<template #title>
			<div class="d-module-title">
				<b>承租人信息</b>
			</div>
		</template>
		<a-descriptions-item label="姓名" :span="8">{{ enterRenterInfo.name || '-' }}</a-descriptions-item>
		<a-descriptions-item label="电话" :span="8">{{ enterRenterInfo.phone || '-' }}</a-descriptions-item>
		<a-descriptions-item label="性别" :span="8">
			<span class="">
				{{ !enterRenterInfo.gender && enterRenterInfo.gender !== 0 ? '-' : sexList[enterRenterInfo.gender] }}
			</span>
		</a-descriptions-item>
		<a-descriptions-item label="证件类型" :span="8">{{ CERTIFICATION_TYPE_MAP[enterRenterInfo.certificationType] || '-' }}</a-descriptions-item>
		<a-descriptions-item label="证件号码" :span="8">{{ enterRenterInfo.identityCard || '-' }}</a-descriptions-item>
		<a-descriptions-item label="客户来源" :span="8">{{ enterRenterInfo.customerResourceName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="职业信息" :span="8">
			{{ enterRenterInfo.profession ? occupation.find(v => v.value == enterRenterInfo.profession).label : '-' }}
		</a-descriptions-item>
		<a-descriptions-item label="工作单位" :span="8">{{ enterRenterInfo.workAddress || '-' }}</a-descriptions-item>
		<a-descriptions-item label="重点人群" :span="8">{{ enterRenterInfo.keyGroupsTypeName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="爱好" :span="8">{{ enterRenterInfo.interestName || '-' }}</a-descriptions-item>
		<a-descriptions-item label="账号类型" :span="8">{{ paymentType[enterRenterInfo.paymentType] || '-' }}</a-descriptions-item>
		<a-descriptions-item label="收付款账号" :span="8">{{ enterRenterInfo.paymentNo || '-' }}</a-descriptions-item>
		<a-descriptions-item label="证件凭证" :span="8">
			<div class="file-upload-container custom">
				<div class="file-preview">
					<a-image
						v-if="enterRenterInfo.frontImgUrl"
						style="object-fit: contain"
						:width="100"
						:height="60"
						:src="enterRenterInfo.frontImgUrl"
						:preview="{
							src: enterRenterInfo.frontImgUrl
						}" />
					<a-image v-if="enterRenterInfo.rearImgUrl" :width="100" :height="60" style="object-fit: contain" :src="enterRenterInfo.rearImgUrl" :preview="{src: enterRenterInfo.rearImgUrl}" />
				</div>
			</div>
		</a-descriptions-item>
	</a-descriptions> -->
	<!-- <a-divider type="horizontal" style="background-color: #f5f5f5" /> -->
	<!-- <a-descriptions v-if="props.contractType !== 2" size="small" :column="24">
		<template #title>
			<div class="d-module-title">
				<b>紧急联系人信息</b>
			</div>
		</template>

		<a-descriptions-item :span="24">
			<div v-if="!props.enterpriseSignType" class="flex-align-center">
				<span style="margin-right: 20px">紧急联系人</span>
				<a v-if="isEdit" @click="editEmergency"><FormOutlined /></a>
			</div>
		</a-descriptions-item>

		<a-descriptions-item label="姓名" :span="8">{{ dataSource.emergencyName }}</a-descriptions-item>
		<a-descriptions-item label="电话" :span="8">{{ dataSource.emergencyPhone }}</a-descriptions-item>
		<a-descriptions-item label="关系" :span="8">
			{{ dataSource.emergencyType ? relationshipList.filter((item: any) => item.value == dataSource.emergencyType)[0].label : '' }}
		</a-descriptions-item>
	</a-descriptions> -->
	<a-divider type="horizontal" style="background-color: #f5f5f5" v-if="isEnterprise('checkIn') && props.contractType !== 2" />
	<a-descriptions size="small" :column="24" v-if="isEnterprise('checkIn')" class="hidden-bottom">
		<template #title>
			<a-row justify="space-between">
				<div class="d-module-title">
					<b>入住记录</b>
				</div>
				<span class="set-font-normal-size">入住人数：{{ checkInNum }} 人</span>
			</a-row>
		</template>
		<a-descriptions-item></a-descriptions-item>
	</a-descriptions>
	<div class="table-box" style="width: 100%; height: 60vh" v-if="isEnterprise('checkIn')">
		<vxe-grid ref="grid" v-bind="gridOptions" class="grid">
			<template #status="{row}">
				<div class="status-box">
					<!-- 1 入住 2 搬离 -->
					<div :class="[row.status === 1 ? 'is-check-in' : 'check-in']"></div>
					<div>{{ row.status === 1 ? '已入住' : '搬离' }}</div>
				</div>
			</template>

			<template #occupancy="{row}">
				<div>
					{{ row.checkInBeginTime }}
					<span v-if="row.checkInBeginTime">至</span>
					{{ row.checkInEndTime }}
				</div>
			</template>
			<template #operate="{row}">
				<a v-color="{color: 'danger'}" v-if="row.status === 1" @click="moveOut(row)">搬离</a>
			</template>
		</vxe-grid>
	</div>

	<!-- 添加编辑同住人 -->
	<add-roommate-dialog
		:contract-id="contractId"
		:data="togetherItem"
		v-model:visible="operationList.showAddRoommate"
		@success="addRoommateSuccess" />
	<!-- 删除同住人 -->
	<delete-roommate-dialog :id="deleteId" v-model:visible="operationList.showDeleteRoommate" @success="emit('success')" />
	<!-- 编辑紧急联系人 -->
	<addEditEmergencyDialog
		:id="dataSource.id"
		:data="{
			emergencyName: dataSource.emergencyName,
			emergencyPhone: dataSource.emergencyPhone,
			emergencyType: dataSource.emergencyType || ''
		}"
		v-model:visible="operationList.showAddEditEmergency"
		@success="emit('success')" />
	<!-- 删除紧急联系人 -->
	<delete-emergency-dialog :id="dataSource.id" v-model:visible="operationList.showDeleteEmergency" @success="emit('success')" />
	<!-- 通行授权弹窗 -->
	<access-authorization-dialog v-model:visible="showAccessAuth" :device-detail="deviceDetail" :hydropower="false" />
	<!-- <access-authorization-rewrite-dialog :houseInfoArr="houseInfoArr" v-model:visible="showAccessAuth" /> -->
	<batch-access-grant-dialog v-model:visible="showBatchAccess" :access-detail="accessDetail" />
	<!-- 编辑用户电话弹窗 -->
	<edit-tenant-phone-dialog
		v-model:visible="operationList.showEditTenantPhone"
		:name="dataSource.name"
		:phone="dataSource.phone"
		:contractId="dataSource.contractId"
		@success="emit('success')"></edit-tenant-phone-dialog>
	<!-- 租客信息变更记录 -->
	<modify-phone-record v-model:visible="operationList.showModifyRecord" :id="dataSource.id"></modify-phone-record>
	<!-- 搬离 -->
	<move-out-dialog v-model:visible="isShowMoveOut" :info="moveInfo" @success="refuseData"></move-out-dialog>

	<!-- 更新租客信息 -->
	<update-information
		v-model:visible="operationList.showTenantInformation"
		:dataSource="dataSource"
		@success="emit('success')"></update-information>
</template>
<script setup lang="ts">
	import {ref, reactive} from 'vue'
	import {occupation, relationshipList, renterRelationList, sexList} from '@/utils'
	import {CERTIFICATION_TYPE_MAP} from 'yuxin-base/src/constant/index'
	import AddRoommateDialog from './add-roommate-dialog.vue'
	import DeleteRoommateDialog from './delete-roommate-dialog.vue'
	import AddEditEmergencyDialog from './add-editEmergency-dialog.vue'
	import EditTenantPhoneDialog from './edit-tenant-phone.vue'
	import ModifyPhoneRecord from './modify-phone-record.vue'
	import DeleteEmergencyDialog from './delete-editEmergency-dialog.vue'
	import AccessAuthorizationDialog from '@/components/contract/add-tenant-contract-dialog/access-authorization-dialog.vue'
	// import AccessAuthorizationRewriteDialog from '@/components/contract/add-tenant-contract-dialog/access-authorization-rewrite-dialog.vue'
	import BatchAccessGrantDialog from '@/components/contract/add-tenant-contract-dialog/batch-access-grant-dialog.vue'
	import {renterContractDeviceDetail} from '@/api/contract'
	import {message} from 'ant-design-vue'
	import {DeleteOutlined, FormOutlined} from '@ant-design/icons-vue'
	import {RenterContractDevice} from '@/interface/contract'
	import {VxeGridProps} from 'vxe-table'
	import {getCheckInRecord, getCountEnterContractCheck} from '@/api/charter-contract'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import moveOutDialog from '@/components/contract/contract-detail-dialog/charter-contract/move-out.vue'
	import {getBatchDeviceAuth} from '@/api/device'
	import UpdateInformation from '@/components/contract/contract-detail-dialog/tenant/update-information.vue'
	import {useStore} from '@/store/index'

	const hasPermissions = useStore().hasPermissions

	const props = defineProps<{
		dataSource: any
		detailInfo: any
		contractId?: string | null
		isEdit: boolean
		isShow?: boolean
		enterRenterInfo?: any
		enterpriseSignType?: string | null | number
		approvalStatus?: string | null | number
		contractType?: number | string
		contractStatus?: number | string
	}>()

	const paymentType: {
		[key: string | number]: any
	} = {
		1: '银联',
		2: '支付宝',
		3: '微信'
	}
	const checkInNum = ref(0)
	// 获取入住记录
	const paramsWithEnterPrise = reactive<any>({
		current: 1,
		// enterPriseContractId: null,
		isSearchCount: 1,
		size: 999
	})

	const emit = defineEmits(['success'])

	// console.log(props.dataSource, '同住人信息')
	// console.log(props.detailInfo, 'detailInfo')
	// console.log(props.enterpriseSignType, '拿到了吗')

	const operationList = ref<any>({
		showAddRoommate: false,
		showDeleteRoommate: false,
		showAddEditEmergency: false,
		showDeleteEmergency: false,
		showEditTenantPhone: false,
		showModifyRecord: false,
		//操作更新租客信息
		showTenantInformation: false
	})
	const deleteId = ref<string>('')
	const deleteTogether = (id: string) => {
		deleteId.value = id
		operationList.value.showDeleteRoommate = true
	}
	const togetherItem = ref<any>({})
	const editTogether = (item: any) => {
		togetherItem.value = item
		operationList.value.showAddRoommate = true
	}
	const grantAccess = (item: any) => {
		const {
			data: {name, phone, identityCard, certificationType, renterRelation}
		} = item
		const {beginTime, endTime, houseId, rentFreeDay} = props.detailInfo
		showBatchAccess.value = true
		accessDetail.value = {
			name,
			phone,
			identityCard,
			certificationType,
			renterRelation,
			beginTime,
			endTime,
			houseId,
			rentFreeDay,
			contractId: props.contractId,
			certificationTypeDesc: CERTIFICATION_TYPE_MAP[certificationType],
			renterRelationDesc: renterRelation ? renterRelationList[Number(renterRelation) - 1].label : ''
		}
	}
	// 智能设备通行授权
	const deviceDetail = ref<RenterContractDevice>({} as RenterContractDevice)
	const showAccessAuth = ref(false)
	const showBatchAccess = ref(false)
	const accessDetail = ref({})
	// 批量下发授权(保存的时候根据接口校验,单个的也走批量的逻辑 只是数组里只有一项)
	const houseInfoArr = ref([])
	const batchDeviceAccessAuth = (renterId: any) => {
		if (!renterId) return
		const params = [
			{
				id: props.contractId,
				renterId: renterId
			}
		]
		getBatchDeviceAuth(params).then(({data}) => {
			data.forEach(i => {
				i.sourceType = 2
				i.renterInfos = (i.renterInfos || [])
					.filter((v: any) => v.id === renterId)
					.map(j => {
						return {
							...j,
							accessAuthType: [],
							lockAuthType: []
						}
					})
			})
			houseInfoArr.value = data || []
			if (!data.map(i => i.showAccessLock).includes(true)) {
				showAccessAuth.value = false
				return
			}
			if (data.map(i => i.hasLock).includes(true) || data.map(i => i.hasAccess).includes(true)) {
				showAccessAuth.value = true
			}
		})
	}

	const addRoommateSuccess = (renterId: any) => {
		if (renterId) {
			let params = {
				id: props.contractId,
				renterId: renterId
			}
			renterContractDeviceDetail(params.id, params.renterId).then(({data}) => {
				data.renterInfos = data.renterInfos
					.filter((v: any) => v.id === renterId)
					.map((item: any) => {
						return {
							...item,
							accessAuthType: [],
							lockAuthType: []
						}
					})
				deviceDetail.value = data
				if (!deviceDetail.value.showAccessLock) {
					showAccessAuth.value = false
					return
				}
				if (deviceDetail.value.hasLock || deviceDetail.value.hasAccess) {
					showAccessAuth.value = true
				}
			})
		} else {
			message.success('操作成功')
		}
		emit('success')
	}

	const isEnterprise = (field: string) => {
		let record = {
			temp: true,
			checkIn: false
		}
		if (props.isShow) {
			record.temp = false
			record.checkIn = true
		}
		if (props.enterpriseSignType === '1' || props.enterpriseSignType === 1) {
			record.temp = false
			record.checkIn = true
		}
		return record[field]
	}

	// 修改紧急联系人
	const editEmergency = () => {
		if ([1, '1', 2, '2'].includes(props.approvalStatus as number)) return message.error('当前合同审批中，暂不允许修改紧急联系人。')
		// if ([2, '2'].includes(props.approvalStatus as number)) return message.error('当前包租合同审批驳回，暂不允许修改紧急联系人。')
		operationList.value.showAddEditEmergency = true
	}

	// 获取入住人数
	const countCheckInNum = () => {
		getCountEnterContractCheck({
			contractId: props.dataSource?.contractId
		}).then(res => {
			checkInNum.value = res.data || '-'
		})
	}

	// 入住记录
	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '状态',
				minWidth: 150,
				slots: {
					default: 'status'
				}
			},
			{
				align: 'center',
				title: '楼栋信息/房间号',
				field: 'fullAddress',
				minWidth: 340
			},
			{
				title: '入住人姓名',
				minWidth: 200,
				align: 'center',
				field: 'name'
			},
			{
				title: '入住人电话',
				align: 'center',
				minWidth: 150,
				field: 'phone'
			},
			{
				title: '入住周期',
				align: 'center',
				minWidth: 250,
				slots: {
					default: 'occupancy'
				}
			},
			{
				title: '入住时间',
				align: 'center',
				minWidth: 150,
				field: 'createTime'
			},
			{
				title: '搬离时间',
				align: 'center',
				minWidth: 150,
				field: 'moveTime'
			},
			{
				title: '操作',
				align: 'center',
				minWidth: 100,
				fixed: 'right',
				slots: {
					default: 'operate'
				}
			}
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					// paramsWithEnterPrise.enterPriseContractId = props.dataSource?.enterPriseContractId
					countCheckInNum()
					paramsWithEnterPrise.contractId = props.dataSource?.contractId
					return getCheckInRecord({...paramsWithEnterPrise, current, size})
				}
			}
		}
	})
	const moveInfo = ref<any>({})
	const isShowMoveOut = ref(false)
	const moveOut = (row: any) => {
		moveInfo.value = {
			houseId: row.houseId,
			fullAddress: row.fullAddress,
			compactId: row.contractId, // 子合同id
			enterPriseContractId: row.enterPriseContractId, // 包租合同id
			enterEmployeeId: row.enterPriseEmployeeId, // 企业员工id
			checkInBeginTime: row.checkInBeginTime,
			checkInEndTime: row.checkInEndTime
		}
		isShowMoveOut.value = true
	}
	const refuseData = () => {
		grid.value?.commitProxy('reload')
	}
</script>
<style lang="less" scoped>
	.update-icon {
		margin-left: 10px;
	}
	.update-information {
		margin: 3px 0 0 3px;
		font-size: 13px;
	}
	.status-box {
		display: flex;
		align-items: center;
		.is-check-in {
			width: 6px;
			height: 6px;
			line-height: 27px;
			border-radius: 50%;
			background: #52c41a;
			margin-right: 8px;
			opacity: 1;
		}
		.check-in {
			width: 6px;
			height: 6px;
			line-height: 27px;
			border-radius: 50%;
			background: #0266ff;
			margin-right: 8px;
			opacity: 1;
		}
	}
	.img-box {
		width: 104px;
		height: 104px;
		padding: 8px;
		display: inline-block;
		margin-right: 16px;
		background: #ffffff;
		border-radius: 2px 2px 2px 2px;
		border: 1px solid rgba(0, 0, 0, 0.15);
		.ant-image {
			height: 100%;
			width: 100%;
			.ant-image-img {
				height: 100%;
			}
		}
	}
	.set-font-normal-size {
		font-size: 13px;
		font-weight: normal;
	}
	.flex1 {
		flex: 1;
	}

	.hidden-bottom {
		.ant-descriptions-header {
			margin-bottom: 0;
		}
	}
</style>
